<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments::head(~{::title})">
    <meta charset="UTF-8">
    <title>博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/lib/swiper/swiper.min.css">
    <script src="../static/lib/swiper/swiper.min.js"></script>
</head>
<body>
<!--导航-->
 <nav th:replace="_fragments::menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui icon inverted transparent input m-margin-tb-tiny">
                    <label for="search"></label>
                    <input type="text" id="search" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--中间-->
<main class="m-container m-padded-tb-big animated fadeIn">
    <div class="ui container">

        <!--轮播图开始-->
        <div class="swiper-container m-margin-bottom-small">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="1.html" th:href="@{/blog/{id}(id=1577792888747)}"><img src="https://picsum.photos/id/1002/1127/450" alt="" class="ui rounded image"></a></div>
                <div class="swiper-slide"><a href="1.html" th:href="@{/blog/{id}(id=1577793147252)}"><img src="https://picsum.photos/id/237/1127/450" alt="" class="ui rounded image"></a></div>
                <div class="swiper-slide"><a href="1.html" th:href="@{/blog/{id}(id=1577870084710)}"><img src="https://picsum.photos/id/0/1127/450" alt="" class="ui rounded image"></a></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <!--轮播图结束-->

        <div class="ui stackable grid">
            <div class="eleven wide column">
<!--                header-->
                <div class="ui top attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h3 class="ui teal header">博客</h3>
                        </div>
                        <div class="right aligned column">
                            共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${page.totalSize}">14</h2> 篇
                        </div>
                    </div>
                </div>
<!--                content-->
                <div class="ui attached segment">
                    <div class="ui padded vertical segment m-padded-large">
                        <div class="ui middle aligned mobile reversed stackable grid" th:each="blog:${page.content}">
                            <div class="eleven wide column">
                                <h3 class="ui header"><a href="" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">你真的理解什么是财富自由吗？</a></h3>
                                <p class="m-text" th:text="|${blog.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://unsplash.it/100/100?image=1005" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
                                                <div class="content">
                                                    <a href="#" class="header" th:href="@{${blog.user.nickname}}">Root酱</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> [[${#dates.format(blog.updateTime,'yyy-MM-dd')}]]
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>
                                                [[${blog.views}]]
<!--                                                <span th:text="${blog.views}"> 202</span>-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" th:href="@{/types/{id}(id=${blog.type.id})}" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
                                    </div>
                                </div>
                            </div>
                            <div class="five wide column">
                                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                                    <img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}" alt="" class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
<!--                footer-->
                <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <a href="" th:href="@{/(pageNum=${page.pageNum}-1)}" th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
                        </div>
                        <div class="right aligned column">
                            <a href="" th:href="@{/(pageNum=${page.pageNum}+1)}" th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="five wide column">
<!--                分类-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column">
                                <a href="#" th:href="@{/types/-1}" target="_blank">more <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <div class="ui fluid vertical menu">
                            <a href="#" th:href="@{/types/{id}(id=${type.id})}" target="_blank" class="item" th:each="type:${types}">
                                [[${type.name}]]
                                <div class="ui teal basic left pointing label" th:text="${type.num}">13</div>
                            </a>
                            <!--/*-->
                            <a href="#" class="item">
                                思考与感悟
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <a href="#" class="item">
                                学习日志
                                <div class="ui teal basic left pointing label">13</div>
                            </a>
                            <!--*/-->
                        </div>
                    </div>
                </div>
<!--                标签-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a href="#" th:href="@{/tags/-1}" target="_blank">more <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny" th:each="tag:${tags}">
                            [[${tag.name}]]
                            <span class="detail" th:text="${tag.num}">23</span>
                        </a>
                        <!--/*-->
                        <a href="#" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论
                            <span class="detail">23</span>
                        </a>
                        <a href="#" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论
                            <span class="detail">23</span>
                        </a>
                        <a href="#" class="ui teal basic left pointing label m-margin-tb-tiny">
                            方法论
                            <span class="detail">23</span>
                        </a>
                        <!--*/-->
                    </div>
                </div>
<!--                最新推荐-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment">
                        <i class="bookmark icon"></i>最新推荐
                    </div>
                    <div class="ui segment" th:each="recommendBlog:${recommendBlogs}">
                        <a href="#" th:href="@{/blog/{id}(id=${recommendBlog.id})}" target="_blank" class="m-black" th:text="${recommendBlog.title}">用户故事（User Story）</a>
                    </div>
                    <!--/*-->
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
                    </div>
                    <!--*/-->
                </div>
<!--                二维码-->
                <h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
                <div class="ui centered card" style="width: 129px">
                    <img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=MzU5Njk2NDU3Mg==&mid=2247483653&idx=1&sn=746eae823c5a1171866b097745d49c67&send_time=" alt="" class="ui rounded image" >
                </div>
            </div>
        </div>
    </div>
</main>




<!--底部-->
<footer th:replace="_fragments::footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" alt="微信" class="ui rounded image" style="width: 100px;">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事(User Story)</a>
                    <a href="#" class="item">用户故事(User Story)</a>
                    <a href="#" class="item">用户故事(User Story)</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item m-text-thin">Email：lirenmi@163.com</a>
                    <a href="#" class="item m-text-thin">QQ：865729312</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2019 - 2020 Root酱 Designed by Root酱</p>
    </div>
</footer>
<div id="toolbar" class="m-fixed m-right-bottom">
    <button class="ui teal button" style="border-radius: .28571429rem 0 0 0;">请您留言</button>
</div>
<div class="ui mini modal">
    <div class="header">留言</div>
    <div class="content">
        <form class="ui form">
            <input type="hidden" name="parentComment.id" value="-1">
            <div class="field">
                <label>昵称</label>
                <input type="text" name="nickname">
            </div>
            <div class="field">
                <label>邮箱</label>
                <input type="email" name="email">
            </div>
            <div class="field">
                <label>内容</label>
                <textarea name="content"></textarea>
            </div>
        </form>
    </div>
    <div class="actions">
        <div class="ui black deny button">取消</div>
        <button class="ui positive right labeled icon button" type="button">提交<i class="checkmark icon"></i></button>
    </div>
</div>
<!--/*/<th:block th:replace="_fragments::script">/*/-->
    <script src="../static/js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $("nav a:last-child").click(function(){
        $(".m-item").toggleClass("m-mobile-hide");
    })
</script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal', // 切换选项
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
    $("#toolbar").click(function () {
        $('.ui.mini.modal').modal('show');
    })
    $('.ui.modal button').click(function () {
        $.post("/comments/message",$("form").serialize(),function (data) {
            if (data === 1) {
                alert("留言成功！");
            } else {
                alert("留言失败！")
            }
        })
    })
</script>

</body>
</html>
